<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="css/H-ui.reset.css" rel="stylesheet" type="text/css">
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.min.js"></script>
    <script src="js/pj.js"></script>
</head>
<body>
<!--头部-->
<header>
    <img src="images/13.png">
    <h1>欢迎来到CAFESTORE</h1>
    <p>来吧，享受一下吧~</p>
</header>
<!--注册按钮-->
<div id="join_div">
<div id="join">
    <img src="images/12.png">
    <p>注册CAFESTORE来获得免费的咖啡！</p>

    <a class="hvr-bounce-to-bottom" href="#">注册</a>

    <div style="clear: both"></div>
</div>
</div>
<!--菜单-->
<div id="menu">
    <p class="div_title">查看菜单</p>
    <div style="width: 55px;border-bottom: 2px solid #f27242"></div>
</div>
<div id="menu_img">
    <div class="img_div">
        <a href="#">
            <img src="images/1.jpg">
            <div class="img_title">
                <p>早餐</p>
            </div>
        </a>
    </div>
    <div class="img_div">
        <a href="#">
            <img src="images/2.jpg">
            <div class="img_title">
                <p>午餐</p>
            </div>
        </a>
    </div>
    <div class="img_div">
        <a href="#">
            <img src="images/3.jpg">
            <div class="img_title">
                <p>晚餐</p>
            </div>
        </a>
    </div>
    <div class="img_div">
        <a href="#">
            <img src="images/4.jpg">
            <div class="img_title">
                <p>早午餐</p>
            </div>
        </a>
    </div>
    <div class="img_div">
        <a href="#">
            <img src="images/5.jpg">
            <div class="img_title">
                <p>新鲜菜</p>
            </div>
        </a>
    </div>
    <div class="img_div">
        <a href="#">
            <img src="images/6.jpg">
            <div class="img_title">
                <p>咖啡</p>
            </div>
        </a>
    </div>
    <div style="clear: both"></div>
</div>
<!--客户留言-->
<div id="client">
    <div id="client_title">
    <p id="client_message">客户留言</p>
    <p style="display:block;width: 55px;border-bottom: 2px solid #f27242;"></p>
    </div>
    <div class="div_evaluation">
        <p>"细致平衡中突显浓浓的果酸，散发着黑霉般的果香。若你爱发掘单品
            咖啡的不同风味，这便是您的上佳之选，冷饮或热饮皆宜。"</p>
        <p class="name">马东,肯尼亚咖啡</p>
    </div>
    <div class="div_evaluation ">
        <p>"渗透着大都会风味，浓郁醇厚，完美地调和了拉丁美洲与
            印度尼西亚咖啡豆，加上点点意大利烘焙咖啡，更添深度与香甜。"</p>
        <p class="name">陈翔,黄金海岸综合咖啡</p>
    </div>

</div>
<!--活动-->
<div id="events">
    <p class="div_title">精彩活动</p>
    <div style="width: 55px;border-bottom: 2px solid #f27242"></div>
    <p class="div_text">为了满足大家的需求，本店将推出一下两项精彩活动，请大家敬请期待。请将您的意见和建议反馈给我们，以便我们能够帮助您解决问题。</p>
</div>
<div id="events_img">
    <a class="events_card" href="single.html">
        <p class="buttons">烧烤</p>
        <div class="events_img_txt">
            <p class="events_time">2018.06.01</p>
            <p class="events_content">为了感谢大家的支持，本店决定在6月1日举办一场盛大的烧烤宴会，欢迎大家来参加~</p>
        </div>
        <img src="images/9.jpg">
    </a>


    <a class="events_card" href="single.html">
        <p class="buttons">咖啡周</p>
        <div class="events_img_txt">
            <p class="events_time">2018.05.21</p>
            <p class="events_content">5月21日是本店的咖啡周，本店的咖啡全场9.5折，还有更多优惠，敬请期待~</p>
        </div>
        <img src="images/10.jpg">
    </a>
    <div style="clear: both;padding-bottom: 70px"></div>
</div>
<!--尾部-->
<footer>
    <div id="footer_content">
        <div id="footer_content_h2">
        <h2>关于本店</h2>
        <div style="width: 55px;border-bottom: 2px solid #f27242"></div>
        </div>
        <p>星期一-星期五
            <span>7.00-21.00</span>
        </p>
        <p>星期六-星期日
            <span>7.00-24.00</span>
        </p>
        <p>XX省X市X城区
            <span>龙湖大道3号</span>
        </p>
        <p>18000000000
            <span>xxxxx@xx.com</span>
        </p>

        <div style="clear:both"></div>
    </div>
    <ul>
        <li class="footer_li"><a class="s" href="#"></a></li>
        <li class="footer_li"><a class="t" href="#"></a></li>
        <li class="footer_li"><a class="f" href="#"></a></li>
    </ul>
    <p>Copyright © 2015.Company name All rights reserved.More Templates </p>
</footer>
</body>

</html>